<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>04_class与style绑定</title>
        <style>
            .red {
                font-size: 30px;
                color: red;
            }
            .green {
                font-size: 30px;
                color: green;
            }
        </style>
    </head>
    <body>
        <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

        <div id="app">
            <h2>1. class绑定: :class='xxx'</h2>
            <!-- 1.动态改变样式 强制数据绑定"里面放的插值表达式，注意常量要用单引号"" -->
            <p :class="isRed? 'red':'green'">这是一段文字~</p>
            <!-- 2上面的还可这样写。class形式里面是一个对象，对象key是类名，值为true/false 是否显示 -->

            <p
                :class="{
        red:isRed,
        green:!isRed
      }"
            >
                这是一段文字~
            </p>
            <!-- 3.如果有多个类，可写成数组的形式 -->
            <p
                :class="[isRed? 'red':'green','xxx',
       'yyy']"
            >
                这是一段文字~
            </p>
            <button class="red" @click="changeColor">改变颜色</button>

            <h2>2. style绑定</h2>
            <!-- 4，style形式改变样式，改变样式是无限则使用这个比较方便 -->
            <p :style="{
              color:'red',
              fontSize:size +'px'
              }">这是一段文字~</p>
            <input type="text" placeholder="请输入字体大小"  v-model='size'/>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isRed: true,
                    size:12,
                },
                methods: {
                    // 切换颜色
                    changeColor() {
                        this.isRed = !this.isRed
                    },
                },
            })
        </script>
    </body>
</html>
